<template>
	<view class="page flex-col">
		<view class="block_1 flex-col">
			<!-- 轮播图 -->
			<!-- <view class="group_1 flex-col">
				<view class="banner">
					<view class="uview-banner">
						<image style="width: 100%;height: 100%;background-size: 100% 100%;" :src="ticket_img" mode="">
						</image>
						<image style="width: 100%;height: 500rpx;background-size: 100% 100%;" :src="ticket_img" mode="">
						</image>
					</view>
				</view>
			</view> -->
			<view class="flex-row">
				<view class="">
					<image :src="list.ticket_picture" style="width: 160rpx;height: 160rpx;margin-top: 20rpx;" mode=""></image>
				</view>
				<view class="group_2 flex-col">
					<!-- <text class="text_4">商品名称示范文案</text>
					<text class="paragraph_1">
						1231
					</text> -->

					<view class="group_3 flex-row justify-between">
						<view class="text-wrapper_2">
							<text class="text_shnagp">{{list.ticket_name}}</text>
						</view>
						<view class="" style="text-align: right;width: 47%;">
							<!-- <image style="width: 22rpx;height: 22rpx;text-align: right;"
								src="https://niule.qfycloud.com/images/icon_5.png" mode=""></image>
							<text class="text_77">分享</text> -->

							<text class="text_7">剩余{{list.stock}}/{{list.inventory}}</text>
						</view>

					</view>
					<view class="group_3 flex-row justify-between">
						<view class="text-wrapper_2">
							<!-- <text class="text_55">会员价：</text> -->
							<text class="text_556">￥{{list.price}}</text>
							<text class="text_56">￥{{list.crossed_price}}</text>

						</view>
						<view class="" style="text-align: right;width: 41%;">
							<!-- <u-number-box v-model="num">
								<view slot="minus" class="minus">
									<u-icon name="minus" size="12"></u-icon>
								</view>
								<text slot="input" style="width: 40px;text-align: center;" class="input">{{num}}</text>
								<view slot="plus" class="plus">
									<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
								</view>
							</u-number-box> -->
							<u-number-box :disabledInput="true" v-model="value" @change="valChange" :min="1"
								:max="list.day_max_hold" color="#ffffff" bgColor="#0E9698" iconStyle="color: #fff"
								buttonSize='25px'></u-number-box>
						</view>
					</view>

					<view class="text_4q">
						场馆:{{list.venuelist.venue_name}}
					</view>

				</view>
			</view>
			<view class="group_4 flex-col"></view>
			<div class="tabs_1 flex-col justify-between">
				<u-tabs :list="tabsList" lineColor="##0E9698" :activeStyle="{
				  color: '#000000',
				}" :inactiveStyle="{
				  color: '#c2c1c1',
				}" :lineWidth="30" :current="currentTab" @click="onClickTab" />
			</div>
			<view style="padding: 40rpx 40rpx;" v-if="currentTab == 0">
				<!-- <image style="width: 100%;height: 100%;background-size: 100% 100%;" :src="im.url" mode="widthFix">
				</image> -->
				<u-parse :content="list.detail_content"></u-parse>
			</view>
			<view style="padding: 40rpx 40rpx;" v-if="currentTab == 1">
				<u-parse :content="list.buy_content"></u-parse>
			</view>
			<view class="" style="width: 100; height: 143rpx;">

			</view>
			<view class="group_6 flex-col">
				<view class="footer flex-align">
					<view class="menu" @click="indexlist">
						<image mode="aspectFit" src="https://niule.qfycloud.com/images/home.png">
						</image>
						<text>首页</text>
					</view>
					<view v-if="list.inventory > 0" class="btn_n" @click="btnlist">立即下单</view>
					<view v-else class="btn_n" @click="btnlist">立即下单</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	const index = require("@/api/index/index.js");
	export default {
		data() {
			return {
				ticket_img: this.$https.assetsPath + "image24.jpg",
				tabsList: [{
						name: "商品详情"
					},
					{
						name: "购买说明"
					}
				],
				currentTab: 0,
				num: 1,
				ids: '',
				list: {},
				value: 1
			};
		},
		onLoad(options) {
			this.ids = options.ids
			this.ticket_list()
		},
		onShow() {

		},
		methods: {
			valChange(e) {
				this.total = 0
				console.log('当前值为: ' + e.value)
				// this.total = this.amount (this.money * this.value )
				if (e.value == this.list.day_max_hold) {
					uni.$u.toast('单次购买不能大于每日最大购买量，如有需要请至前台购买');
				} 
				this.total += e.value * this.money;
			},
			ticket_list() {
				index.ticket_view({
					ids: this.ids
				}).then(res => {
					if (res.code == 1) {
						this.list = res.data
					}
				})
			},
			onClickTab({
				index
			}) {
				this.currentTab = index;
			},
			indexlist() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			btnlist() {
				uni.navigateTo({
					url: '/page_venues/confirm_order/confirm_ticket?ids=' + this.ids + "&total=" + this.value,
				})
			}
		}
	};
</script>
<style lang='scss'>
	@import '../../static/css/common/common.scss';

	.page {
		position: relative;
		width: 750rpx;
		height: 100%;
		overflow: hidden;

		.block_1 {
			width: 750rpx;
			height: 100%;
			padding: 0 20rpx;

			.group_1 {
				background-color: rgba(255, 255, 255, 1.0);
				width: 750rpx;
				height: 380rpx;

				.banner {
					position: relative;
					display: flex;
					justify-content: center;
				}

				.uview-banner {
					width: 100%;
					position: absolute;
					z-index: 1;
					/* width: 463rpx; */
					height: 400rpx;
					/* margin: 60rpx 0 0 0; */
					/* top: 10rpx; */
				}

				/* 	.banner::after {
					content: '';
					width: 100%;
					height: 260rpx;
					position: absolute;
					border-radius: 0 0 100% 100%;
					background: #0E9698 ;
					box-shadow: 0px 0px 10px 10px rgba(182, 174, 174, 0.75);
					-webkit-box-shadow: 0px 0px 10px 10px rgba(182, 174, 174, 0.75);
					-moz-box-shadow: 0px 0px 10px 10px rgba(182, 174, 174, 0.75);
				} */

			}

			.group_2 {
				width: 750rpx;
				/* height: 440rpx; */
				height: auto;
				/* margin-top: 10rpx; */

				.text_4 {
					width: 90%;
					height: 34rpx;
					color: rgba(51, 51, 51, 1);
					font-size: 36rpx;
					font-weight: 700;
					text-align: left;
					line-height: 36rpx;
					margin: 30rpx 0 0 30rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.text_4q {
					color: #0E9698;
					font-size: 28rpx;
					font-weight: 600;
					text-align: left;
					margin: 20rpx 0 0 30rpx;
				}

				.paragraph_1 {
					width: 689rpx;
					height: 60rpx;
					overflow-wrap: break-word;
					color: rgba(136, 136, 136, 1);
					font-size: 24rpx;
					font-family: PingFang-SC-Regular;
					font-weight: NaN;
					text-align: left;
					line-height: 36rpx;
					margin: 30rpx 0 0 30rpx;
				}

				.group_34 {
					width: 690rpx;
					height: 52rpx;
					margin: 20rpx 0 0 31rpx;
					background: #F6F6F6;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					line-height: 52rpx;


					.block_9 {
						width: 750rpx;
						height: auto;

						.image_9 {
							width: 654rpx;
							height: 22rpx;
							margin: 33rpx 0 0 48rpx;
						}

						.nav-bar_1 {
							width: 747rpx;
							height: 95rpx;
							margin-top: 28rpx;

							.group_2 {
								height: 37rpx;
								width: 185rpx;
								margin: 30rpx 0 0 30rpx;

								.block_10 {
									width: 185rpx;
									height: 37rpx;

									.icon_1 {
										width: 20rpx;
										height: 37rpx;
									}

									.text_44 {
										width: 146rpx;
										height: 34rpx;
										overflow-wrap: break-word;
										color: rgba(255, 255, 255, 1);
										font-size: 36rpx;
										font-family: PingFang-SC-Regular;
										font-weight: NaN;
										text-align: left;
										white-space: nowrap;
										line-height: 36rpx;
										margin-top: 1rpx;
									}
								}
							}

							.applet-top-bar_1 {
								width: 150rpx;
								height: 55rpx;
								margin: 24rpx 27rpx 0 355rpx;
							}
						}

						.block_11 {
							width: 687rpx;
							height: 41rpx;
							margin: 15rpx 0 20rpx 31rpx;

							.text-wrapper_10 {
								width: 124rpx;
								height: 39rpx;
								overflow-wrap: break-word;
								font-size: 0;
								font-family: DIN-Bold;
								font-weight: 700;
								text-align: left;
								white-space: nowrap;
								line-height: 33rpx;

								.text_45 {
									width: 124rpx;
									height: 39rpx;
									overflow-wrap: break-word;
									color: rgba(255, 255, 255, 1);
									font-size: 50rpx;
									font-family: DIN-Bold;
									font-weight: 700;
									text-align: left;
									white-space: nowrap;
									line-height: 33rpx;
								}

								.text_46 {
									width: 124rpx;
									height: 39rpx;
									overflow-wrap: break-word;
									color: #999999;
									font-size: 24rpx;
									font-family: Source Han Sans CN-Regular, Source Han Sans CN;
									font-weight: 500;
									text-align: left;
									white-space: nowrap;
									line-height: 33rpx;
									margin-left: 6rpx;
								}
							}

							.text_47 {
								width: 86rpx;
								height: 21rpx;
								overflow-wrap: break-word;
								color: rgba(255, 255, 255, 1);
								font-size: 22rpx;
								font-family: PingFang-SC-Medium;
								font-weight: 500;
								text-align: left;
								white-space: nowrap;
								line-height: 33rpx;
								margin-top: 20rpx;
							}
						}


					}
				}

				.group_3 {
					width: 72vw;
					height: 40rpx;
					margin: 20rpx 0 0 31rpx;

					.minus {
						width: 22px;
						height: 22px;
						border-width: 1px;
						border-color: #E6E6E6;
						border-style: solid;
						border-top-left-radius: 100px;
						border-top-right-radius: 100px;
						border-bottom-left-radius: 100px;
						border-bottom-right-radius: 100px;
						@include flex;
						justify-content: center;
						align-items: center;
					}

					.input {
						padding: 0 10px;
					}

					.plus {
						width: 22px;
						height: 22px;
						background-color: #0E9698;
						border-radius: 50%;
						/* #ifndef APP-NVUE */
						display: flex;
						/* #endif */
						justify-content: center;
						align-items: center;
					}

					.text-wrapper_2 {
						width: 320rpx;
						height: 40rpx;
						font-size: 0;
						font-weight: 500;
						text-align: left;
						line-height: 40rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;

						.text_shnagp {
							width: 100rpx;
							font-weight: 500;
							text-align: left;
							height: 50rpx;
							font-size: 34rpx;
							color: #333333;
							line-height: 50rpx;

						}

						.text_5 {
							width: 117rpx;
							height: 30rpx;
							color: rgba(0, 0, 0, 1.0);
							font-size: 20rpx;
							font-weight: 500;
							text-align: left;
							line-height: 36rpx;
						}

						.text_5_5 {
							width: 158rpx;
							height: 28rpx;
							font-size: 20rpx;
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							font-weight: 500;
							color: #0E9698;
							line-height: 28rpx;
						}

						.text_55 {
							width: 117rpx;
							height: 30rpx;
							overflow-wrap: break-word;
							color: #333333;
							font-size: 24rpx;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 36rpx;

							/* width: 370rpx;
							height: 52rpx;
							font-size: 24rpx;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 400;
							color: #333333;
							line-height: 34rpx; */
						}

						.text_556 {
							width: 117rpx;
							height: 30rpx;
							overflow-wrap: break-word;
							color: #0E9698;
							font-size: 36rpx;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 36rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.text_6 {
							width: 117rpx;
							height: 30rpx;
							overflow-wrap: break-word;
							color: rgba(245, 64, 41, 1);
							font-size: 24rpx;
							font-family: PingFang-SC-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 24rpx;

						}

						.text_56 {
							width: 117rpx;
							height: 30rpx;
							overflow-wrap: break-word;
							font-size: 24rpx;
							font-family: PingFang-SC-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 24rpx;
							color: #9E9E9E;
							text-decoration: line-through;
							margin-left: 20rpx;
						}
					}

					.text_77 {
						width: 154rpx;
						height: 25rpx;
						overflow-wrap: break-word;
						color: rgba(190, 190, 190, 1);
						color: #6D6D6D;
						font-size: 22rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: NaN;
						text-align: right;
						white-space: nowrap;
						line-height: 34rpx;
					}

					.text_7 {
						/* width: 154rpx; */
						/* height: 25rpx; */
						color: rgba(190, 190, 190, 1);
						font-size: 26rpx;
						text-align: right;
						/* line-height: 34rpx; */
						margin-top: 6rpx;
						margin-right: 10rpx;
					}
				}

				.group_4 {
					background-color: rgba(243, 243, 243, 1);
					width: 750rpx;
					height: 20rpx;
					margin-top: 29rpx;
				}

				.tabs_1 {
					height: 55rpx;
					width: 302rpx;
					/* margin: 29rpx 0 0 31rpx; */

					.text-wrapper_3 {
						width: 252rpx;
						height: 27rpx;

						.text_8 {
							width: 109rpx;
							height: 27rpx;
							overflow-wrap: break-word;
							color: rgba(1, 109, 255, 1);
							font-size: 28rpx;
							font-family: PingFang-SC-Bold;
							font-weight: 700;
							text-align: left;
							white-space: nowrap;
							line-height: 28rpx;
						}

						.text_9 {
							width: 102rpx;
							height: 25rpx;
							overflow-wrap: break-word;
							color: rgba(153, 153, 153, 1);
							font-size: 26rpx;
							font-family: PingFang-SC-Bold;
							font-weight: 700;
							text-align: left;
							white-space: nowrap;
							line-height: 26rpx;
							margin-top: 2rpx;
						}
					}

					.image-wrapper_1 {
						width: 58rpx;
						height: 8rpx;
						margin: 20rpx 0 0 25rpx;

						.image_3 {
							width: 58rpx;
							height: 8rpx;
						}
					}
				}
			}

			.group_s {
				height: 2464rpx;
				margin-top: -1rpx;
				width: 750rpx;
			}

			.group_6 {
				width: 750rpx;
				height: 143rpx;
				position: fixed;
				bottom: 1rpx;
				background-color: #FFFFFF;

				.footer {
					position: fixed;
					width: 100%;
					background-color: white;
					bottom: 0;
					left: 0;
					padding: 20rpx 25rpx 20rpx 25rpx;
					box-sizing: border-box;

					.menu {
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-right: 40rpx;

						image {
							width: 40rpx;
							height: 35rpx;
						}

						text {
							color: rgb(51, 51, 51);
							font-size: 24rpx;
							font-weight: 700;
							margin-top: 13rpx;
						}
					}

					.btn {
						flex: 1;
						color: rgb(255, 255, 255);
						padding: 26rpx 0;
						border-radius: 60rpx 0 0 60rpx;
						background-color: #29BDBF;
						text-align: center;
						font-weight: 700;
						font-size: 24rpx;
					}

					.btn_n {
						flex: 1;
						color: rgb(255, 255, 255);
						font-size: 24rpx;
						padding: 26rpx 0;
						border-radius: 60rpx 60rpx 60rpx 60rpx;
						background-color: #0E9698;
						text-align: center;
						font-weight: 700;
					}
					.btn_k {
						flex: 1;
						color: rgb(255, 255, 255);
						font-size: 24rpx;
						padding: 26rpx 0;
						border-radius: 60rpx 60rpx 60rpx 60rpx;
						background-color: #d0d0d0;
						text-align: center;
						font-weight: 700;
					}
				}
			}
		}
	}
</style>